import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';

// 自动导入插件
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import IconsResolver from 'unplugin-icons/resolver';
import Icons from 'unplugin-icons/vite';

// https://vite.dev/config/
export default defineConfig(({ mode }) => {
  // 指定环境文件目录
  const env = loadEnv(mode, 'config/env', ''); // 第三个参数为空字符串表示加载所有变量
  return {
    define: {
      'import.meta.env': JSON.stringify(env),
    },
    plugins: [
      vue(),
      // element-plus 自动导入插件
      AutoImport({
        // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
        // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
        resolvers: [
          ElementPlusResolver({
            importStyle: 'sass', // 按需加载样式（需安装 sass）
            directives: true, // 自动导入指令（如 v-loading）
          }),

          // Auto import icon components
          // 自动导入图标组件
          IconsResolver({
            prefix: 'i', // 统一图标前缀为 <i-ep-xxx>
            enabledCollections: ['ep'], // Element Plus 官方图标
          }),
        ],

        vueTemplate: true, // 启用 Vue 模板支持
        dts: resolve(__dirname, 'auto-imports.d.ts'),
        eslintrc: {
          enabled: true,
          filepath: './auto-import.config.js',
        }, // 生成 ESLint 配置
      }),
      Components({
        resolvers: [
          // Auto register icon components
          // 自动注册图标组件
          IconsResolver({
            prefix: 'i', // 与 AutoImport 一致
            enabledCollections: ['ep'],
            // 增加分辨率别名防止 SVG 冲突
            alias: {
              'i-svg': 'svg',
              'i-custom': 'custom',
            },
          }),
          // Auto register Element Plus components
          // 自动导入 Element Plus 组件
          ElementPlusResolver(),
        ],

        dts: resolve(__dirname, 'components.d.ts'),
      }),
      Icons({
        compiler: 'vue3', // 明确指定 Vue 3 编译器
        autoInstall: true,
        defaultClass: 'inline-icon', // 全局图标样式类
      }),
    ],
    resolve: {
      alias: {
        '@': resolve(__dirname, './src'),
      },
    },

    // scss全局变量
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `
          @use '@/styles/variable.scss' as *;
        `,
        },
      },
    },
  };
});
